<script lang="ts" setup>
import { VueDraggable } from 'vue-draggable-plus'
import Calendar from '@/components/Calendar/index.vue'

const props = withDefaults(defineProps<Props>(), {
  readonly: false,
  showMask: false,
})

interface Props {
  readonly?: boolean
  showMask?: boolean
}

interface DateWithIndex {
  lessonStartTime?: string
  lessonEndTime?: string
  lessonDate: Date
  lessonIndex: number
}

const model = defineModel<DateWithIndex[]>({
  default: [],
})

// 当前日期
const currentDate = ref(new Date())

// 清空
const onClear = () => {
  model.value = []
}

// 排序
const onSort = async () => {
  model.value.sort((a: any, b: any) => a.lessonDate - b.lessonDate)
  await nextTick(() => {
    model.value.forEach((item, index) => {
      item.lessonIndex = index + 1
    })
  })
}
const onDragUpdate = async () => {
  await nextTick(() => {
    model.value.forEach((item, index) => {
      item.lessonIndex = index + 1
    })
  })
}
// 月份变化
const onMonthChange = (date: Date) => {
  currentDate.value = date
}

// 是否为当前月份
const isCurrentMonth = (date) => {
  return date.getMonth() === currentDate.value.getMonth()
}

// 判断是否为同一天
const isSameDay = (date1, date2) => {
  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate()
}

// 判断是否为今天
const isToday = (date) => {
  const today = new Date()
  return isSameDay(today, date)
}

// 查找日期顺序
const findDateIndex = (date: Date) => {
  return model.value.findIndex(item => isSameDay(date, item.lessonDate))
}

// 查找日期
const findDateItem = (date: Date) => {
  return model.value.find(item => isSameDay(date, item.lessonDate))
}

// 移除日期
const remove = (date: Date) => {
  const index = findDateIndex(date)
  if (index !== -1) {
    model.value.splice(index, 1)
  }
}

// 点击日期
const onItemClick = (item: Date) => {
  if (props.readonly) {
    return
  }
  currentDate.value = item
  const index = findDateIndex(item)
  if (index === -1) {
    model.value.push({ lessonDate: item, lessonIndex: model.value.length + 1 })
  } else {
    model.value.splice(index, 1)
  }
}
</script>

<template>
  <div class="arrange-calender">
    <div class="calendar">
      <Calendar
        mode="month"
        :show-toggle="false"
        :disabled="readonly"
        :show-mask="showMask"
        @month-change="onMonthChange"
      >
        <template #default="item">
          <div v-if="findDateIndex(item.date) === -1" class="cell cursor-pointer" :class="{ today: isToday(item.date), disabled: !isCurrentMonth(item.date) }" @click="onItemClick(item.date)">
            {{ item.date.getDate() }}
          </div>
          <div v-else class="cell active cursor-pointer" @click="onItemClick(item.date)">
            <img src="@/assets/images/checked_badge.png" class="badge">
            <div :class="{ today: isToday(item.date) }">
              {{ item.date.getDate() }}
            </div>
            <div class="times">
              第{{ findDateItem(item.date)?.lessonIndex }}次课
            </div>
          </div>
        </template>
      </Calendar>
    </div>
    <div class="lesson-list">
      <div class="h-44px flex-row-between-center p-10px">
        <div class="flex-row-start-center">
          <a-tooltip content="长按课次可拖拽排序">
            <icon-info-circle-fill class="cursor-pointer" style="color: rgb(var(--primary-6));" />
          </a-tooltip>
          <span class="mx-1">课次列表</span>
          <a-tag size="small" color="orangered">
            <template #icon>
              <icon-star />
            </template>
            共{{ model.length }}次课
          </a-tag>
        </div>
        <a-space v-if="!readonly">
          <a-button type="text" size="small" @click="onSort">
            <template #icon>
              <icon-sort />
            </template>
            排序
          </a-button>
          <a-button type="text" size="small" @click="onClear">
            <template #icon>
              <icon-delete />
            </template>
            清空
          </a-button>
        </a-space>
      </div>
      <div class="flex-1 overflow-y-auto">
        <VueDraggable v-if="model.length > 0" v-model="model" :animation="300" :disabled="readonly" @update="onDragUpdate">
          <div v-for="(item, index) in model" :key="index" class="m-10px list-item cursor-move rounded p-8px">
            <div class="mb-6px">
              第{{ item.lessonIndex }}次课
            </div>
            <div class="text-13px text-gray-5">
              {{ `${item.lessonDate.getFullYear()}-${item.lessonDate.getMonth() + 1}-${item.lessonDate.getDate()}` }}
              <span v-if="item.lessonStartTime && item.lessonEndTime">
                {{ item.lessonStartTime }} ~ {{ item.lessonEndTime }}
              </span>
            </div>
            <div v-if="!readonly" class="icon" @click="remove(item.lessonDate)">
              <icon-close />
            </div>
            <div v-else class="icon">
              <slot name="extra" :item="item">
                <p>提示内容</p>
              </slot>
            </div>
          </div>
        </VueDraggable>
        <a-empty v-else />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.arrange-calender {
  display: flex;
  height: 100%;
  height: 420px;

  .calendar {
    width: 550px;
    border-right-width: 0px;
    .cell {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      user-select: none;
      position: relative;
      border-radius: 6px;
      overflow: hidden;

      .disabled {
        color: #ccc;
      }

      .badge {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 0px;
        top: 0px;
      }

      .times {
        margin-top: 4px;
        font-size: 11px;
        color: rgb(var(--primary-6));
      }

      .today {
        color: rgb(var(--primary-6));
      }
    }
  }
}

.active {
  color: rgb(var(--primary-6));
  background: rgba(45, 92, 246, 0.1);
}

:deep(.calendar-cell-item) {
  height: 42px;
  min-height: auto !important;
}

:deep(.calendar-table) {
  td {
    border: none !important;
    padding: 6px;
  }

  thead tr {
    border-bottom: 1px solid #e5e6ea;
  }
}

:deep(.arco-btn-size-small) {
  padding: 0px;
}

.lesson-list {
  // height: 100%;
  border: 1px solid rgb(225, 230, 239);
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .list-item {
    background: rgba(80, 126, 247, 0.1);
    position: relative;

    .icon {
      padding: 5px;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      border-radius: 4px;

      &:hover {
        background: rgba(80, 126, 247, 0.15);
        color: #999;
      }
    }
  }
}
</style>
